<script setup lang="ts">
import { ElMessage } from "element-plus";
import hljs from "highlight.js";
import { Marked } from "marked";
import { markedHighlight } from "marked-highlight";
import { onMounted } from "vue";
import { copeCode } from "@/utils/function";
interface Props {
  content: string;
  cope?: boolean;
  showCope?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  cope: false,
  showCope: true,
});

let copyCodeData: string[] = [];

const marked = new Marked(
  markedHighlight({
    langPrefix: "hljs language-",
    highlight(code, lang) {
      console.log(lang);
      copyCodeData.push(code);
      const language = hljs.getLanguage(lang) ? lang : "plaintext";
      let html = hljs.highlight(code, { language }).value;
      // const svg = MathJax.tex2svg(html, { display: true });
      // html = MathJax.startup.adaptor.outerHTML(svg);
      const lines = html.split(/\n/); //.slice(0, -1);
      let linesNum = "";
      for (let index = 0; index < lines.length; index++) {
        linesNum = linesNum + "<span class='line-number'>" + lines[index] + "</span>";
      }
      const copeHtml = `<div class="copy-btn" data-index='${
        copyCodeData.length - 1
      }'>复制</div>`;
      const languageHtml = `<div  class="language-type">${lang}</div>`;

      return linesNum + copeHtml + languageHtml;
    },
  })
);
const getHtml = () => {
  let value = props.content;
  if (!value) return "";
  if (value.includes("```")) {
    value = value.replace(/<br>|<br\/>|<br \/>/g, "\n");
    value = value.replace(/&nbsp;/g, " ");
    value = marked.parse(value);
  } else {
    value = value.replace(/\n/g, "<br />");
  }
  return value;
};

const handleClick = (e: MouseEvent) => {
  const dom = e.target as any;

  if (dom?.className && dom.className === "copy-btn") {
    const index = dom.getAttribute("data-index");
    const str = copyCodeData[index].toLocaleString();
    copeCode(str);
  }
};
const handleClickQw = () => {
  copeCode(props.content);
};

onMounted(() => {});
</script>

<template>
  <div class="richTextBody">
    <div @click="handleClick" v-html="getHtml()"></div>
    <svg-icon
      title="点击复制"
      @click="handleClickQw"
      class="cope-icon"
      icon="svg:cope"
      v-if="showCope"
    />
  </div>
</template>

<style lang="scss" scoped>
.richTextBody {
  position: relative;
  word-wrap: break-word;
  .cope-icon {
    position: absolute;
    right: -40px;
    bottom: -0px;
    font-size: 14px;
    &:hover {
      color: $base;
    }
  }
}
::v-deep {
  code:not(.hljs) {
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 12px;
    margin: 0px 4px;
    position: relative;
    display: inline-block;
    padding: 0 6px;
    text-align: center;
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    border: none;
    vertical-align: middle;
    white-space: pre-wrap;
    color: red;
    background-color: #ccc;
  }
  pre {
    position: relative;
    &::before {
      background: #fc625d;
      border-radius: 50%;
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
      content: "";
      height: 12px;
      width: 12px;
      display: inline-block;
      position: absolute;
      left: 10px;
      top: 10px;
    }
  }
  .hljs {
    line-height: 1.4;
    overflow: hidden;
    padding: 30px 20px 0;
    @include scrollBar(transparent, #555, 8px);
    overflow-x: auto;
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
    font-weight: 300;

    .line-number {
      display: list-item;
      line-height: 1.4;
      margin-bottom: 0;
      counter-increment: span;
      margin-left: 10px;
      padding-left: 15px;
      white-space: nowrap;
      &::marker {
        // counter-increment: section; /* 只增加计数器的当前实例 */
        content: counters(span, ".") " ";
        text-align: center;
        border-right: 1px solid #fff;
        font-family: "Times New Roman", Times, serif;
      }
    }
  }
  .hljs-tag {
  }

  .copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    color: rgba($color: #fff, $alpha: 0.5);
    z-index: 99;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      color: rgba($color: #fff, $alpha: 0.8);
    }
  }
  .language-type {
    position: absolute;
    left: 70px;
    top: 5px;
  }
}
</style>
